<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <input type="file" hidden ref="inputFile" @change="onFileChange">
    <!-- /导航栏 -->
    <!-- 个人信息 -->
    <van-cell title="头像" is-link @click="$refs.inputFile.click()">
      <van-image class="avatar" fit="cover" round :src="user.photo" />
    </van-cell>
    <van-cell
      title="昵称"
      :value="user.name"
      is-link
      @click="isShowUpdateName = true"
    />
    <van-cell title="性别" :value="user.gender == 1 ? '女' : '男'" is-link @click="isShowUpdateGender = true " />
    <van-cell title="生日" @click="isShowUpdateBirthdy = true" :value="user.birthday || '1977-00-00'" is-link />
    <!-- /个人信息 -->
    <!-- 编辑昵称弹层 -->
    <van-popup
      v-model="isShowUpdateName"
      style="height: 100%"
      position="bottom"
    >
      <updateName @close="close"></updateName>
    </van-popup>
    <!-- 编辑昵称弹层 -->
    <!-- 编辑性别弹层 -->
    <van-popup
           v-model="isShowUpdateGender"
           position="bottom">
    <update-gender @close="close" :genders="user.gender"/>
    </van-popup>
<!-- 编辑昵称弹层 -->
<!-- 编辑生日弹层 -->
    <van-popup
    v-model="isShowUpdateBirthdy"
    position="bottom">
      <updateBirthdy @close="close"></updateBirthdy>
    </van-popup>
    <!-- 编辑生日弹层 -->
    <!-- 编辑头像弹层 -->
    <van-popup
    v-model="isShowUpdateAvatar"
    style="height: 100%"
    position="bottom">
      <updateAvatar @close='close' :img="img"></updateAvatar>
    </van-popup>
    <!-- 编辑头像弹层 -->
  </div>
</template>

<script>
import { getUserProfile } from '@/api/user'
import updateName from './components/update_name.vue'
import updateGender from './components/update-gender.vue'
import updateBirthdy from './components/update-birthdy.vue'
import updateAvatar from './components/update-avatar.vue'
export default {
  name: '',
  components: {
    updateName,
    updateGender,
    updateBirthdy,
    updateAvatar
  },
  data () {
    return {
      user: {},
      isShowUpdateName: false,
      isShowUpdateGender: false,
      isShowUpdateBirthdy: false,
      isShowUpdateAvatar: false,
      img: null // 预览的图片
    }
  },

  methods: {
    async loaduser () {
      try {
        const { data } = await getUserProfile()
        this.user = data.data
      } catch (error) {
        this.$toast('获取数据失败')
      }
    },
    close () {
      this.isShowUpdateName = false
      this.isShowUpdateGender = false
      this.isShowUpdateBirthdy = false
      this.isShowUpdateAvatar = false
      this.loaduser()
    },
    onFileChange () {
    // 获取文件对象
      const file = this.$refs.inputFile.files[0]
      // 获取blob数据
      this.img = window.URL.createObjectURL(file)
      this.isShowUpdateAvatar = true
      this.$refs.inputFile.value = ''
    }
  },
  async created () {
    await this.loaduser()
  }
}
</script>

<style lang="less" scoped>
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }

  .van-popup {
    background-color: #f5f7f9;
  }
}
</style>
